<template>
    <div>
        <a-drawer v-model:open="visible" :title="formState.id ? '编辑' : '新增'" :width="drawerWidth" :destroyOnClose="true"
            @close="onClose">
            <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
                <a-divider orientation="left">
                    <template #prefix><UserOutlined /></template>
                    基本信息
                </a-divider>
                <Row :gutter="[32, 24]">
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="住院号" name="inpNo"  class="wrap-label">
                        <a-input v-model:value.trim="formState.inpNo" placeholder="请输入住院号" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="姓名" name="name"  class="wrap-label">
                        <a-input v-model:value="formState.name" placeholder="请输入姓名" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="性别" name="sex"  class="wrap-label" >
                        <a-input v-model:value="formState.sex" placeholder="请输入性别" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="年龄" name="age"  class="wrap-label" >
                        <a-input v-model:value="formState.age" placeholder="请输入年龄" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="手术间" name="operatingRoomNo"  class="wrap-label">
                        <a-input v-model:value="formState.operatingRoomNo" placeholder="请输入手术间" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="病区床号" name="bedNo"  class="wrap-label">
                        <a-input v-model:value="formState.bedNo" placeholder="请输入病区床号" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="诊断" name="diagnosis"  class="wrap-label">
                        <a-input v-model:value="formState.diagnosis" placeholder="请输入诊断" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="手术名称" name="operationName"  class="wrap-label">
                        <a-input v-model:value="formState.operationName" placeholder="请输入手术名称" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="手术间" name="operatingRoomNo"  class="wrap-label">
                        <a-input v-model:value="formState.operatingRoomNo" placeholder="请输入手术间" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="台次" name="sequence"  class="wrap-label">
                        <a-input v-model:value="formState.sequence" placeholder="请输入台次" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="麻醉方法" name="anesthesiaMethod"  class="wrap-label" >
                        <a-input v-model:value="formState.anesthesiaMethod" placeholder="请输入麻醉方法" />
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="带教老师" name="teacher"   class="wrap-label">
                        <a-input v-model:value="formState.teacher" placeholder="请输入带教老师" />
                    </a-form-item>
                    </Col>

                </Row>

                <a-divider orientation="left">
                    <template #prefix><UserOutlined /></template>
                    所属亚专业
                </a-divider>
                <Row :gutter="[32, 24]">
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="普通外科麻醉(含烧伤)" name="generalSurgical"  class="wrap-label">
                        <a-radio-group v-model:value="formState.generalSurgical">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="骨科与矫形外科麻醉" name="cardiacSurgical"  class="wrap-label">
                        <a-radio-group v-model:value="formState.cardiacSurgical">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="泌尿外科麻醉" name="neuroSurgical"  class="wrap-label">
                        <a-radio-group v-model:value="formState.neuroSurgical">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="神经外科麻醉" name="urologySurgical"  class="wrap-label">
                        <a-radio-group v-model:value="formState.urologySurgical">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="心血管外科麻醉" name="cardiovascularSurgical"  class="wrap-label">
                        <a-radio-group v-model:value="formState.cardiovascularSurgical">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="体外循环" name="extracorporealCirculation"  class="wrap-label">
                        <a-radio-group v-model:value="formState.extracorporealCirculation">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="胸外科麻醉" name="thoracicSurgery"  class="wrap-label">
                        <a-radio-group v-model:value="formState.thoracicSurgery">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="眼科与耳鼻咽喉科麻醉" name="ophthalmologyEnt"  class="wrap-label">
                        <a-radio-group v-model:value="formState.ophthalmologyEnt">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="口腔与颌面外科麻醉" name="oralMaxillofacial"  class="wrap-label">
                        <a-radio-group v-model:value="formState.oralMaxillofacial">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="妇产科麻醉" name="obstetricsGynecology"  class="wrap-label">
                        <a-radio-group v-model:value="formState.obstetricsGynecology">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="产科麻醉" name="obstetrics"  class="wrap-label">
                        <a-radio-group v-model:value="formState.obstetrics">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="小儿麻醉" name="pediatrics"  class="wrap-label">
                        <a-radio-group v-model:value="formState.pediatrics">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>
                </Row>

                <a-divider orientation="left">
                    <template #prefix><UserOutlined /></template>
                    基本麻醉技能要求
                </a-divider>
                <Row :gutter="[32, 24]">
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="气管插管全身麻醉" name="generalAnesthesia"  class="wrap-label">
                        <a-radio-group v-model:value="formState.generalAnesthesia">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="椎管内麻醉" name="spinalAnesthesia"  class="wrap-label">
                        <a-radio-group v-model:value="formState.spinalAnesthesia">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="外周神经阻滞" name="nerveBlock"  class="wrap-label">
                        <a-radio-group v-model:value="formState.nerveBlock">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="监护麻醉管理(MAC)" name="macAnesthesia"  class="wrap-label">
                        <a-radio-group v-model:value="formState.macAnesthesia">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    </Row>

                    <a-divider orientation="left">
                    <template #prefix><UserOutlined /></template>
                    特殊麻醉技能要求
                </a-divider>

                <Row :gutter="[32, 24]">
                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="动脉穿刺置管与监测" name="arterialCatheter"  class="wrap-label">
                        <a-radio-group v-model:value="formState.arterialCatheter">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="纤维支气管镜/可视插管软镜" name="fiberBronchoscope"  class="wrap-label">
                        <a-radio-group v-model:value="formState.fiberBronchoscope">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="双腔支气管插管及对位" name="doubleLumenTube"  class="wrap-label">
                        <a-radio-group v-model:value="formState.doubleLumenTube">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="经鼻气管插管" name="nasalIntubation"  class="wrap-label">
                        <a-radio-group v-model:value="formState.nasalIntubation">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="中心静脉穿刺置管与监测" name="centralVenousCatheter"  class="wrap-label">
                        <a-radio-group v-model:value="formState.centralVenousCatheter">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="喉罩" name="laryngealMask"  class="wrap-label">
                        <a-radio-group v-model:value="formState.laryngealMask">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>

                    <Col :span="8" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
                    <a-form-item label="自体血回输" name="autologousTransfusion"  class="wrap-label">
                        <a-radio-group v-model:value="formState.autologousTransfusion">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    </Col>
                </Row>



                <div class="drawer-footer">
                    <a-space size="middle">
                        <a-button @click="resetForm" class="footer-button">
                            <template #icon>
                                <ReloadOutlined />
                            </template>
                            重置
                        </a-button>
                        <a-button type="primary" @click="handleSubmit" :loading="submitLoading" class="footer-button">
                            <template #icon>
                                <CheckOutlined />
                            </template>
                            提交
                        </a-button>
                    </a-space>
                </div>

            </a-form>
        </a-drawer>
    </div>
</template>

<script setup>
import { reactive, ref, inject,onMounted, onUnmounted } from 'vue';
import { Row, Col, Radio, message } from 'ant-design-vue';
import axios from 'axios';
import { ReloadOutlined, SearchOutlined, UserOutlined, MedicineBoxOutlined, ExperimentOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { anesApi } from '/@/api/anes/aneswork/aneswork-api';
import { smartSentry } from '/@/lib/smart-sentry';
import dayjs from 'dayjs';
import { encryptData } from '/@/lib/encrypt';

// ----------------------- 对外暴漏 ---------------------
defineExpose({
    showAnesModal,
});
// ----------------------- modal 的示与隐藏 ---------------------
const emits = defineEmits(['queryData']);

const visible = ref(false);
async function showAnesModal(data) {
    visible.value = true;
    if (data) {
            updateFormData(data);
    } else {
        updateFormData({})
      
    }
}
function closeModal() {
    visible.value = false;
    resetForm();
}

// 关闭
function onClose() {
    visible.value = false;
}

// ----------------------- 表单操作 ---------------------
const formRef = ref();
const defaultAnesWorkForm = {
    id: undefined,
    patientId: undefined,
    visitId: undefined,
    inpNo: undefined,
    name: undefined,
    sex: undefined,
    age: undefined,
    bedNo: undefined,
    deptCode: undefined,
    deptName: undefined,
    scheduledDateTime: undefined,
    state: undefined,
    operatingRoomNo: undefined,
    sequence: undefined,
    teacher: undefined,
    surgeon: undefined,
    createPeople: undefined,
    createTime:undefined,
    checkPeople: undefined,
    anesthesiaMethod: undefined,
};
const formState = reactive({
    ...defaultAnesWorkForm,
});

// 更新表单数据
function updateFormData(data) {
    Object.assign(formState, defaultAnesWorkForm, data);
}
// 重置表单
function resetForm() {
    formRef.value?.resetFields();
    Object.assign(formState, defaultAnesWorkForm);
}
// 添加 submitLoading 状态
const submitLoading = ref(false);
// 修改提交函数
async function handleSubmit() {
    try {
        // 表单验证
        await formRef.value.validate();
        submitLoading.value = true;
        if(!formState.id)
    {
        const submitData = {
            ...formState,
            // 处理日期时间格式
            scheduledDateTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
            state:0
        };
        let data = { encryptData: encryptData(submitData) };
        
        // 区分新增和编辑
        let response  = await anesApi.addAneswork(data);
        if (response.code === 0) {
            message.success('保存成功');
            closeModal();
           // queryData();
            emits('queryData');  // 刷新列表
        } else {
            message.error(response.message || '保存失败');
        }
    }
    else
    {
        let data = { encryptData: encryptData(formState) };
        
        let response  = await anesApi.updateAneswork(data);
        if (response.code === 0) {
            message.success('保存成功');
            closeModal();
            emits('queryData');  // 刷新列表
        } else {
            message.error(response.message || '保存失败');
        }
    }

        

        
    } catch (error) {
        if (error.errorFields) {
            // 表单验证错误
            message.error('表单填写有误，请检查');
        } else {
            // 接口调用错误
            smartSentry.captureError(error);
            message.error('保存失败，请稍后重试');
        }
    } finally {
        submitLoading.value = false;
    }
}

// 表单验证规则
const rules = {
    inpNo: [
        { required: true, message: '请输入住院号', trigger: 'blur' },
        { pattern: /^\d+$/, message: '住院号必须为数字', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
    ],
    generalSurgical: [{ required: true, message: '请选择普通外科麻醉', trigger: 'change' }],
    cardiacSurgical: [{ required: true, message: '请选择骨科与矫形外科麻醉', trigger: 'change' }],
    neuroSurgical: [{ required: true, message: '请选择是否为泌尿外科麻醉' }],
    urologySurgical: [{ required: true, message: '请选择是否为神经外科麻醉' }],
    cardiovascularSurgical: [{ required: true, message: '请选择是否为心血管外科麻醉' }],
    extracorporealCirculation: [{ required: true, message: '请选择是否为体外循环' }],
    thoracicSurgery: [{ required: true, message: '请选择是否为胸外科麻醉' }],
    spinalAnesthesia: [{ required: true, message: '请选择是否进行椎管内麻醉' }],
    nerveBlock: [{ required: true, message: '请选择是否进行外周神经阻滞' }],
    macAnesthesia: [{ required: true, message: '请选择是否进行监护麻醉管理' }],
};

// 表单默认值
const defaultFormState = {
    id: undefined,
    patientId: undefined,
    visitId: undefined,
    inpNo: undefined,
    name: undefined,
    sex: undefined,
    age: undefined,
    bedNo: undefined,
    deptCode: undefined,
    deptName: undefined,
    scheduledDateTime: undefined,
    state: undefined,
    operatingRoomNo: undefined,
    sequence: undefined,
    teacher: undefined,
    surgeon: undefined,
    diagnosis:undefined,
    createPeople: undefined,
    checkPeople: undefined,
    anesthesiaMethod: undefined,
    generalSurgical: false,
    cardiacSurgical: false,
    neuroSurgical: false,
    urologySurgical: false,
    cardiovascularSurgical: false,
    extracorporealCirculation: false,
    thoracicSurgery: false,
    ophthalmologyEnt: false,
    oralMaxillofacial: false,
    obstetricsGynecology: false,
    obstetrics: false,
    pediatrics: false,
    generalAnesthesia: false,
    spinalAnesthesia: false,
    nerveBlock: false,
    macAnesthesia: false,
};

// 添加响应式的抽屉宽度
const drawerWidth = ref('75%');  // 默认为屏幕宽度的75%

// 如果需要根据屏幕宽度动态调整
function updateDrawerWidth() {
    const screenWidth = window.innerWidth;
    if (screenWidth < 768) {
        drawerWidth.value = '100%';  // 移动端全屏
    } else if (screenWidth < 1200) {
        drawerWidth.value = '85%';   // 平板设备
    } else {
        drawerWidth.value = '75%';   // 桌面设备
    }
}


</script>

<style scoped>
:deep(.ant-form) {
    padding: 0 16px;
}

:deep(.ant-row) {
    background: #fff;
    border-radius: 8px;
    padding: 1px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    position: relative;
    transition: all 0.3s ease;
}

:deep(.ant-row:hover) {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

:deep(.ant-divider) {
    margin: 12px 0 8px !important;
    color: #2f54eb;
    font-weight: 600;
    font-size: 16px;
    border-color: #f0f0f0;
}

:deep(.ant-divider::before),
:deep(.ant-divider::after) {
    border-top-color: #f0f0f0;
}

:deep(.ant-form-item) {
    margin-bottom: 1px !important;
    position: relative;
}

:deep(.ant-form-item-label > label) {
    font-weight: 500;
    color: #1f1f1f;
    font-size: 14px;
}

:deep(.ant-input),
:deep(.ant-input-number),
:deep(.ant-select-selector),
:deep(.ant-picker) {
    border-radius: 6px;
    border-color: #e5e7eb;
    transition: all 0.3s ease;
}

:deep(.ant-input:hover),
:deep(.ant-input-number:hover),
:deep(.ant-select-selector:hover),
:deep(.ant-picker:hover) {
    border-color: #2f54eb;
}

:deep(.ant-input:focus),
:deep(.ant-input-number-focused),
:deep(.ant-select-focused .ant-select-selector),
:deep(.ant-picker-focused) {
    border-color: #2f54eb;
    box-shadow: 0 0 0 2px rgba(47, 84, 235, 0.1);
}

:deep(.ant-radio-group) {
    display: flex;
    gap: 12px;
}

:deep(.ant-radio-wrapper) {
    padding: 1px 8px !important;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    margin-right: 0;
    line-height: 1.5;
}

:deep(.ant-radio-wrapper:hover) {
    border-color: #2f54eb;
}

:deep(.ant-radio-wrapper-checked) {
    background: #f0f5ff;
    border-color: #2f54eb;
}

:deep(.ant-radio-wrapper .ant-radio) {
    margin-right: 4px;
}

.drawer-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 8px 16px;
    text-align: right;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    z-index: 1000;
}

.footer-button {
    min-width: 70px;
    height: 32px;
    border-radius: 4px;
    font-size: 13px;
    padding: 0 12px;
}

:deep(.ant-space-item) {
    margin-left: 8px !important;
}

:deep(.ant-drawer-body) {
    padding: 24px 8px;
    padding-bottom: 60px;
    overflow: auto;
    background-color: #f8f9fa;
}

:deep(.ant-drawer-header) {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 16px;
}

:deep(.ant-drawer-title) {
    font-weight: 600;
    font-size: 16px;
    color: #1f1f1f;
}

/* 响应式优化 */
@media screen and (max-width: 768px) {
    :deep(.ant-form) {
        padding: 0 8px;
    }

    :deep(.ant-row) {
        padding: 16px;
        margin-bottom: 16px;
    }

    :deep(.ant-divider) {
        margin: 24px 0 16px;
        font-size: 16px;
    }

    :deep(.ant-form-item) {
        margin-bottom: 16px;
    }

    .drawer-footer {
        padding: 6px 12px;
    }

    .footer-button {
        min-width: 60px;
        height: 30px;
        font-size: 12px;
    }
}

/* 滚动条美化 */
:deep(.ant-drawer-body::-webkit-scrollbar) {
    width: 6px;
    height: 6px;
}

:deep(.ant-drawer-body::-webkit-scrollbar-thumb) {
    background: #d9d9d9;
    border-radius: 3px;
}

:deep(.ant-drawer-body::-webkit-scrollbar-track) {
    background: #f5f5f5;
    border-radius: 3px;
}

/* 表单项悬停效果 */
:deep(.ant-form-item:hover) {
    z-index: 1;
}

/* 必填项标记样式优化 */
:deep(.ant-form-item-::before) {
    color: #ff4d4f;
}

/* 错误状态优化 */
:deep(.ant-form-item-has-error .ant-input),
:deep(.ant-form-item-has-error .ant-input-number),
:deep(.ant-form-item-has-error .ant-select-selector) {
    border-color: #ff4d4f;
}

:deep(.ant-form-item-has-error .ant-form-item-explain) {
    font-size: 13px;
    margin-top: 4px;
}

/* 处理长标签换行问题 */
.wrap-label :deep(.ant-form-item-label) {
    white-space: normal;
    height: auto;
    line-height: 1.2;
    padding-bottom: 1px !important;
}

.wrap-label :deep(.ant-form-item-label > label) {
    height: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 优化表单项布局 */
:deep(.ant-form-item-label) {
    text-align: left;
    padding-right: 8px;
}

:deep(.ant-form-item-label > label) {
    font-size: 13px;
    color: #1f1f1f;
    font-weight: normal;
}

/* 优化单选按钮组样式 */
:deep(.ant-radio-group) {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

:deep(.ant-radio-wrapper) {
    padding: 2px 8px !important;
    /* font-size: 12px; */
    white-space: nowrap;
}

/* 分隔线样式优化 */
:deep(.ant-divider) {
    margin: 12px 0 8px !important;
    font-size: 14px;
}

/* 调整抽屉内容区域的内边距 */
:deep(.ant-drawer-body) {
    padding: 16px 8px;
    padding-bottom: 90px;
}

/* 响应式布局优化 */
@media screen and (max-width: 1400px) {
    .wrap-label :deep(.ant-form-item-label > label) {
        font-size: 12px;
    }
}

@media screen and (max-width: 768px) {
    :deep(.ant-col) {
        padding: 1px 4px !important;
    }
    
    :deep(.ant-form-item) {
        margin-bottom: 1px !important;
    }
    
    .wrap-label :deep(.ant-form-item-label) {
        padding-bottom: 1px !important;
    }
}

/* 优化表单控件样式 */
:deep(.ant-input),
:deep(.ant-input-number),
:deep(.ant-select-selector),
:deep(.ant-picker) {
    height: 28px !important;
    padding: 2px 8px !important;
}

/* 优化必填标记的位置 */
:deep(.ant-form-item-::before) {
    margin-right: 2px;
    font-size: 12px;
}

/* 添加表单项的hover效果 */
:deep(.ant-form-item:hover) {
    background-color: #fafafa;
    border-radius: 4px;
}

/* 优化错误提示的显示 */
:deep(.ant-form-item-explain) {
    font-size: 12px;
    margin-top: 2px;
    min-height: 20px;
}

/* 优化抽屉响应式样式 */
:deep(.ant-drawer-content-wrapper) {
    max-width: 100vw;  /* 确保不会超出视口宽度 */
    transition: width 0.3s ease;  /* 添加宽度变化动画 */
}

@media screen and (max-width: 768px) {
    :deep(.ant-drawer-content-wrapper) {
        width: 100% !important;  /* 移动端强制全屏 */
    }
}

/* 优化单选按钮组的样式 */
:deep(.ant-radio-group) {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

:deep(.ant-radio-wrapper) {
    padding: 2px 8px !important;
    font-size: 12px;
    white-space: nowrap;
}

/* 优化表单项间距 */
:deep(.ant-col) {
    margin-bottom: 4px;
}

/* 优化分组标题 */
:deep(.ant-divider) {
    margin: 12px 0 8px !important;
    font-size: 14px;
}

/* 优化表单项标签 */
.wrap-label :deep(.ant-form-item-label > label) {
    font-size: 12px;
    line-height: 1.2;
}

/* 调整表单布局 */
:deep(.ant-form-item) {
    margin-bottom: 4px !important;
}
</style>
